<template>
  <block v-if="show">
    <!--空占位符-->
    <view class="empty-placeholder" v-if="type == 'empty'"
          :style="{'height':'calc(100vh - '+ styleTop +'px)','margin-top':styleTop +'px'}">
      <div>
        <image class="icon-xl" src="/static/images/icon_error.png"
               style="display: block;width: 130px;height: 130px; margin: auto" mode="aspectFit"/>
        <text class="ml20">{{message}}</text>
        <button style="margin-top: 10px;width: 150px" class="mlBtn" :hidden="hidBtn" @click="tryAgain" type="default"
                hover-class="other-button-hover">{{btnText}}
        </button>
      </div>
    </view>

    <!--新增占位符-->
    <view class="empty-placeholder column-center" v-else-if="type == 'add'" @click="tap">
      <div>
        <image class="icon-xl" src="http://image.off-online.com/goods/220058/2018102617070233027036"/>
        <text class="mt20">{{message}}</text>
      </div>
    </view>
  </block>
</template>

<script>
  export default {
    props: {
      btnText: {
        type: String,
        default: '再试一次'
      },
      styleTop: {
        type: String,
        default: '0'
      },
      hidBtn: {
        type: Boolean,
        default: false
      },
      show: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'empty'
      },
      message: {default: '没有相关信息'}
    },
    methods: {
      tap() {
        this.$emit('tap')
      },
      tryAgain() {
        this.$emit('tryAgain')
      }
    }
  }
</script>

<style>
  .empty-placeholder {
    width: 100%;
    height: 100vh;
    text-align: center;
    align-items: center;
    position: relative;
    z-index: 9999;
    background-color: #f3f3f3;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: Center;
  }

  .empty-placeholder text {
    color: black;
    font-size: 16px;
  }

  .button-hover {
    color: black;
    background-color: white;
  }

  /** 添加自定义button点击态样式类**/
  .other-button-hover {
    background-color: #eeeeee;
    color: white;
  }

  .mlBtn {
    position: relative;
    margin: 0px auto;
    background-color: black;
    color: white;
  }
</style>
